<script setup>
import HeaderZu from '@/components/HeaderZu.vue';
import PanelZu from '@/components/PanelZu.vue';
import NumberZu from './components/NumberZu.vue';
import MapZu from './components/MapZu.vue';

import BarTu from './components/tubiao/BarTu.vue';
import BarTu2 from './components/tubiao/BarTu2.vue';

import LineTu from './components/tubiao/LineTu.vue';
import LineTu2 from './components/tubiao/LineTu2.vue';

import PieTu from './components/tubiao/PieTu.vue';
import PieTu2 from './components/tubiao/PieTu2.vue';

import MapTu from './components/tubiao/MapTu.vue';
</script>

<template>
  <header-zu></header-zu>
  <div class="mainbox">
    <div class="column">
      <panel-zu title="柱形图-就业行业">
        <bar-tu></bar-tu>
      </panel-zu>
      <panel-zu title="折线图-人员变化" go="2021" goo="2022">
        <line-tu></line-tu>
      </panel-zu>
      <panel-zu title="饼形图-年龄变化">
        <pie-tu></pie-tu>
      </panel-zu>
    </div>
    <div class="column">
      <number-zu></number-zu>
      <map-zu>
        <map-tu></map-tu>
      </map-zu>
    </div>
    <div class="column">
      <panel-zu title="柱形图-技能掌握">
        <bar-tu2></bar-tu2>
      </panel-zu>
      <panel-zu title="折线图-播放量">
        <line-tu2></line-tu2>
      </panel-zu>
      <panel-zu title="饼形图-地区分布">
        <pie-tu2></pie-tu2>
      </panel-zu>
    </div>
  </div>
</template>

<style scoped lang="less">
.mainbox{
  display: flex;//flex布局
  min-width: 1024px;
  max-width: 1920px;
  margin: 0 auto;
  .column{
    flex:3;//占三份
  }
  .column:nth-child(2){
      flex:5;//第二个孩子占五份
      padding: 0 10px 10px ;
    }
}
</style>
